<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="./animate.css">
  <title>Bootstrap</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a href="#" class="navbar-brand">Bootstrap学习</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu"><span
          class="navbar-toggler-icon"></span></button>
      <div id="navmenu" class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <div class="nav-link">前端开发</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">打包优化</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">组织架构</div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="p-5 bg-dark text-light text-center text-sm-start">
    <div class="container">
      <div class="d-flex">
        <div>
          <h1>玩转 <span class="text-warning">前端</span></h1>
          <!-- margin的上边距和下边距设一个值 -->
          <p class="my-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis distinctio soluta enim harum
            magnam cum
            quae mollitia, voluptas, debitis impedit odio nesciunt, illum maxime repellendus aspernatur id ab aliquid
            corrupti?
            Ex nemo et repudiandae provident, nisi dolorum molestiae deserunt officia quam officiis quasi nam libero
            odio voluptatibus corporis sequi? Molestiae illo soluta consequuntur earum eligendi voluptatem quaerat
            facere pariatur possimus.</p>
          <button class="btn btn-primary btn-lg">开始编程之旅</button>
        </div>
        <img class="w-50 d-none d-md-block" src="./img/showcase.svg" alt="showcase">
      </div>
    </div>
  </section>

  <section class="p-5 bg-warning text-light">
    <div class="container">
      <div class="d-md-flex justify-content-between align-items-center">
        <h3 class="mb-3">现在注册账号开始编程之旅</h3>
        <div class="input-group new-input">
          <input type="text" class="form-control" placeholder="请输入你的邮箱">
          <button class="btn btn-dark btn-lg">注册</button>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <div class="row g-4">
        <div class="col-md wow animated flipInY ">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <div class="card-title">
                前端知识
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quis error, neque, accusantium, modi odit
                dolorem magnam consequatur odio eaque beatae illum
              </div>
              <a href="#" class="btn btn-primary mt-2">学习前端</a>
            </div>
          </div>
        </div>
        <div class="col-md wow animated flipInY ">
          <div class="card bg-secondary text-light">
            <div class="card-body text-center">
              <div class="card-title">
                CSS精讲
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quis error, neque, accusantium, modi odit
                dolorem magnam consequatur odio eaque beatae illum
              </div>
              <a href="#" class="btn btn-dark mt-2">学习CSS</a>
            </div>
          </div>
        </div>
        <div class="col-md wow animated flipInY ">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <div class="card-title">
                框架体系
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quis error, neque, accusantium, modi odit
                dolorem magnam consequatur odio eaque beatae illum
              </div>
              <a href="#" class="btn btn-primary mt-2">学习框架</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md wow animated fadeInLeft">
          <img src="./img/1.svg" alt="1" class="img-fluid">
        </div>
        <div class="col-md p-5 wow animated fadeInRight">
          <h2>课程介绍</h2>
          <p class="leaed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dolorum facilis et
            doloremque
            cupiditate! Quod.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, eligendi et voluptates vitae sapiente atque
            deserunt dignissimos possimus voluptatum eius est error officiis laudantium recusandae in architecto!
            Dolorem, asperiores omnis.</p>
          <a href="#" class="btn btn-light">查看更多</a>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 bg-dark text-light">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md p-5 wow animated fadeInLeft">
          <h2>课程介绍</h2>
          <p class="leaed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dolorum facilis et
            doloremque
            cupiditate! Quod.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, eligendi et voluptates vitae sapiente atque
            deserunt dignissimos possimus voluptatum eius est error officiis laudantium recusandae in architecto!
            Dolorem, asperiores omnis.</p>
          <a href="#" class="btn btn-light">查看更多</a>
        </div>
        <div class="col-md wow animated fadeInRight">
          <img src="./img/2.svg" alt="1" class="img-fluid">
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <h2 class="text-center">常见问题</h2>
      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the first item's accordion body.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being
              filled with some actual content.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting
              happening here in terms of content, but just filling up the space to make it look, at least at first
              glance, a bit more representative of how this would look in a real-world application.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 bg-dark">
    <div class="container wow animated slideInUp">
      <h2 class="text-center text-light">讲师介绍</h2>
      <p class="lead text-center text-white mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum
        commodi aspernatur voluptatibus aperiam nostrum rerum?</p>
      <div class="row g-4">
        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/01-man.jpeg" alt="" class="mb-3 rounded-circle hoverBig">
              <h3 class="crad-title">Brittaney</h3>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, esse
                temporibus. Laborum natus fuga sequi?</p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/02-man.jpeg" alt="" class="mb-3 rounded-circle hoverBig">
              <h3 class="crad-title">FideIma</h3>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, esse
                temporibus. Laborum natus fuga sequi?</p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/03-man.jpeg" alt="" class="mb-3 rounded-circle hoverBig">
              <h3 class="crad-title">Loranda</h3>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, esse
                temporibus. Laborum natus fuga sequi?</p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/04-man.jpeg" alt="" class="mb-3 rounded-circle hoverBig">
              <h3 class="crad-title">Gala</h3>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, esse
                temporibus. Laborum natus fuga sequi?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <h2 class="text-center mb-4">联系我们</h2>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">电话:132xxxxxxxx</li>
        <li class="list-group-item">邮箱:RainZ0000@163.com</li>
        <li class="list-group-item">地址:广州市番禺区</li>
      </ul>
    </div>
  </section>

  <footer class="p-5 bg-dark text-white text-center">
    <div class="container">
      <p class="lead">Copyright &copy; 2022 Bootstrap</p>
    </div>
  </footer>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>

  <script>
    $(function () {
      new WOW().init()
    })
  </script>
</body>

</html>